   html,
   body {
   	position: relative;
   	height: 100%;
   }
   
   * {
   	margin: 0;
   	padding: 0;
   }
   
   body {
   	background: #eee;
   	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
   	font-size: 14px;
   	color: #000;
   	margin: 0;
   	padding: 0;
   }
   
   .swiper-container {
   	width: 100%;
   	height: 100%;
   	margin-left: auto;
   	margin-right: auto;
   }
   
   .expswiper-container {
   	width: 100%;
   	height: 100%;
   	margin-left: auto;
   	margin-right: auto;
   }
   
   .swiper-slide {
   	text-align: center;
   	font-size: 18px;
   	background: #FFFFFF;
   	position: relative;
   }
   
   #nav {
   	width: 100%;
   	height: 50px;
   	background-color: rgba(255, 255, 255, 0.1);
   	position: fixed;
   	top: 0;
   	text-align: right;
   }
   
   #nav a {
   	display: inline-block;
   	width: 150px;
   	height: 50px;
   	text-decoration: none;
   	font-size: 18px;
   	font-weight: 50px;
   	margin-right: 30px;
   	line-height: 50px;
   	color: gray;
   }
   
   #nav a:hover {
   	color: darkgray;
   }
   
   .cont {
   	width: 1000px;
   	height: 100%;
   	margin: 0 auto;
   	margin-top: 50px;
   	position: relative;
   	background-image: url(../img/timg.jpg);
   	background-repeat: no-repeat;
   }
   
   #pho {
   	width: 295px;
   	height: 413px;
   	position: absolute;
   	top: 50px;
   	left: 50px;
   	background-image: url(../img/白.jpg);
   	background-repeat: no-repeat;
   	background-size: cover;
   	opacity: 0;
   	-webkit-transition: all 2.5s linear;
   	-moz-transition: all 2.5s linear;
   	-ms-transition: all 2.5s linear;
   	-o-transition: all 2.5s linear;
   	transition: all 2.5s linear;
   }
   
   .font {
   	width: 640px;
   	height: 413px;
   	color: whitesmoke;
   	float: right;
   	text-align: left;
   	padding: 50px;
   	box-sizing: border-box;
   }
   
   .font p {
   	margin: 10px;
   }
   
   .font2 {
   	width: 500px;
   	height: 653px;
   	color: whitesmoke;
   	float: left;
   	text-align: left;
   	box-sizing: border-box;
   }
   
   .font2 p {
   	opacity: 1;
   	margin: 10px;
   	-webkit-transition: all 1s linear;
   	-moz-transition: all 1s linear;
   	-ms-transition: all 1s linear;
   	-o-transition: all 1s linear;
   	transition: all 1s linear;
   }
   
   .more {
   	width: 500px;
   	height: 603px;
   	overflow: hidden;
   	position: relative;
   }
   
   .skill {
   	width: 100%;
   	height: 100%;
   	opacity: 1;
   	padding: 30px;
   	-webkit-transform: rotateY(0deg);
   	-moz-transform: rotateY(0deg);
   	-ms-transform: rotateY(0deg);
   	-o-transform: rotateY(0deg);
   	transform: rotateY(0deg);
   }
   
   .type {
   	display: inline-block;
   	width: 180px;
   	height: 150px;
   	border: 10px solid whitesmoke;
   	border-radius: 30px;
   	margin: 5px;
   	-webkit-transition: all 1s ease;
   	-moz-transition: all 1s ease;
   	-ms-transition: all 1s ease;
   	-o-transition: all 1s ease;
   	transition: all 1s ease;
   }
   
   .type a {
   	display: block;
   	line-height: 150px;
   	font-size: 25px;
   	text-align: center;
   	color: whitesmoke;
   	text-decoration: none;
   }
   .effc {
	width: 100%;
	height: 100%;
   }
	#box{   
	border:2px solid #f60; 
	margin:0 auto;  
	}  
   
   #canvas p {
   	color: grey;
   	font-size: 20px;
   }
   
   #mycanvas {
   	border: 2px solid black;
   }
   /*第四页*/
   
   .infor {
   	font-size: 50px;
   	color: gray;
   	text-align: center;
   }
   
   .pho {
   	height: 400px;
   	width: 100%;
   	overflow: hidden;
   	margin-bottom: 30px;
   }
   
   .pho img {
   	width: 300px;
   	height: 400px;
   	margin: 20px;
   }
   
   .botFont {
   	font-size: 20px;
   	color: gray;
   	text-align: center;
   }
   
   .botFont span {
   	margin-right: 30px;
   }